<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海洋牧场监测系统</title>
    <style>
body {
    margin: 0;
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #001f3f;
    color: #fff;
  }
  .navbar {
    background-color: #003366;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar h1 {
    font-size: 20px;
    margin: 0;
  }
  .navbar ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .navbar ul li {
    margin: 0 15px;
  }
  .navbar ul li a {
    color: #fff;
    text-decoration: none;
  }
  .navbar .username,
  .exit {
    margin-left: 20px;
  }

  /* 顶部信息栏 */
  .top-info-bar {
    background: #00264d;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid #004080;
  }
  .top-info-left,
  .top-info-center,
  .top-info-right {
    display: flex;
    align-items: center;
  }
  .top-info-left > div,
  .top-info-right > div {
    margin-right: 20px;
  }
  .top-info-center {
    font-weight: 600;
    font-size: 18px;
    color: #00aaff;
  }

  /* 主体布局 */
  .main-container {
    display: grid;
    grid-template-columns: 2fr 3fr 2fr;
    grid-gap: 20px;
    padding: 20px 30px;
  }

  /* 左侧信息区 */
  .left-section {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-gap: 20px;
  }

  /* 中间大区域 */
  .center-section {
    background: #00264d;
    border-radius: 12px;
    padding: 30px 40px;
    box-shadow: 0 0 30px #0055ff88;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 20px;
  }
  .center-title {
    grid-column: 1 / -1;
    text-align: center;
    color: #ff3a3a;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
  }

  /* 右侧信息区 */
  .right-section {
    background: #00264d;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 0 20px #0055ff88;
    font-size: 14px;
  }
  .right-section h2 {
    margin-top: 0;
    color: #00aaff;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .right-section ul {
    padding-left: 20px;
    list-style: none;
  }
  .right-section ul li {
    margin-bottom: 6px;
  }

  /* 底部信息区域 */
  .bottom-container {
    margin: 0 30px 30px 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }
  .card {
    background: #00264d;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 0 15px #0055ff88;
  }
  .card h2 {
    margin-top: 0;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
    color: #00aaff;
  }
  .chart {
    height: 200px;
    background: #001a33;
    border-radius: 6px;
  }

  /* 总信息统计中心内容 */
  .gauge-container {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .gauge-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .info-boxes {
    grid-column: 2 / 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .info-box {
    background: #003366;
    border-radius: 8px;
    padding: 10px 15px;
    margin: 5px;
    width: 140px;
    text-align: center;
    box-shadow: 0 0 10px #0077ff99;
  }
  .info-box strong {
    display: block;
    font-size: 22px;
    margin-bottom: 5px;
    color: #00aaff;
  }
  .info-box span {
    font-size: 14px;
    color: #ccc;
  }
  .bottom-info-text {
    grid-column: 1 / -1;
    margin-top: 25px;
    text-align: center;
    font-size: 16px;
    color: #00aaff;
  }
  .bottom-info-numbers {
    margin-top: 6px;
    font-size: 20px;
    background: #003366;
    border-radius: 8px;
    padding: 6px 20px;
    letter-spacing: 8px;
    color: #00aaff;
    display: inline-block;
  }
</style>
</head>
<body>
    <div class="navbar">
        <div><h1>海洋牧场监测系统</h1></div>
        <ul>
                
                    <li><a href="{{ url_for('tomain') }}"><i class="home-icon"></i> 首页</a></li>
                
                
                    <li><a href="{{ url_for('todata') }}"><i class="data-icon"></i> 主要信息</a></li>
                
                
                    <li><a href="{{ url_for('towater') }}"><i class="underwater-icon"></i> 水下系统</a></li>
               
                    <li><a href="{{ url_for('toai') }}"><i class="ai-icon"></i> 智能中心</a></li>
                    {% if userrole=="admin" %}
                    <li><a href="{{ url_for('toadadmin') }}"><i class="admin-icon"></i> 管理员</a></li>
                    {% endif %}
        </ul>
       
        <div >
            <ul><li><a href="{{ url_for('topersonal') }}" class="username"><i class="user-icon"></i> {{ username }} </a></li>
            <li><a href="{{ url_for('exit') }}" class="exit"><i class="exit-icon"></i> 退出</a>
            </li></ul>
            
        </div>
    </div>

<!-- 顶部信息栏 -->
  <div class="top-info-bar">
    <div class="top-info-left">
      <div id="currentTime">时间：--</div>
      <div id="currentTemp">温度：--°C</div>
    </div>
    <div class="top-info-center">海洋牧场 - 一号舱</div>
    <div class="top-info-right"></div>
  </div>

  <!-- 主体布局 -->
  <div class="main-container">

    <!-- 左侧信息 -->
    <div class="left-section">
      <!-- 鱼群数量和变化 -->
      <div class="card">
        <h2>鱼群数量和变化</h2>
        <div id="fishCount" style="font-size: 26px; color:#00aaff; font-weight:700; letter-spacing: 8px; user-select:none;">
          -- -- -- -- --
        </div>
        <div style="margin-top: 8px; font-size:14px; color:#ccc;">
          今日新增：<span id="todayAdd" style="color:#2ecc71;">--</span>&nbsp;&nbsp;&nbsp;
          今日死亡：<span id="todayDead" style="color:#e74c3c;">--</span>
        </div>
      </div>

      <!-- 环境得分 -->
      <div class="card">
        <h2>海洋牧场环境感知得分</h2>
        <div id="environmentScore" style="font-size: 40px; font-weight: 700; color: #00ccff; text-align:center; user-select:none;">
          --
        </div>
      </div>

      <!-- 鱼群个体数量历史曲线 -->
      <div class="card">
        <h2>鱼群个体数量历史曲线</h2>
        <div id="fishHistoryChart" class="chart"></div>
      </div>
    </div>

    <!-- 中央信息 -->
    <div class="center-section">
      <div class="center-title">总信息统计展示</div>
      <div class="gauge-container">
        <div id="totalInfoGauge" style="width: 280px; height: 280px;"></div>
      </div>
      <div class="info-boxes">
        <div class="info-box"><strong id="fishSpecies">--</strong><span>鱼种</span></div>
        <div class="info-box"><strong id="fishSeedling">--</strong><span>鱼苗</span></div>
        <div class="info-box"><strong id="fishGrowth">--</strong><span>生长</span></div>
        <div class="info-box"><strong id="cameraCount">--</strong><span>镜头</span></div>
        <div class="info-box"><strong id="gimbalCount">--</strong><span>云台</span></div>
        <div class="info-box"><strong id="sonarCount">--</strong><span>声呐</span></div>
      </div>
    </div>

    <!-- 右侧信息 -->
    <div class="right-section">
      <h2>硬件信息</h2>
      <ul>
        <li><strong>网箱信息：</strong>长100m，宽50m，深30m，坐标(经度:128.034，纬度:56.123)</li>
        <li><strong>水底传感器：</strong>运行时间 <span id="sensorRunTime">--天--小时--分钟</span></li>
        <li>下次检修：<span id="nextCheck">--天后</span></li>
        <li>保修过期：<span id="warrantyExpire">--年--月--日</span></li>
      </ul>
    </div>
  </div>

  <!-- 底部信息 -->
  <div class="bottom-container">
    <div class="card">
      <h2>某鱼群数量变化</h2>
      <div id="fishChangeChart" class="chart"></div>
    </div>
    <div class="card">
      <h2>鱼群重量、尺寸、生命等信息统计</h2>
      <div id="fishAttributesChart" class="chart"></div>
    </div>
    <div class="card">
      <h2>鱼群种类统计</h2>
      <div id="fishTypePieChart" class="chart"></div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script>
    // 动态更新时间显示函数
    function updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hour = String(now.getHours()).padStart(2, '0');
      const minute = String(now.getMinutes()).padStart(2, '0');
      const second = String(now.getSeconds()).padStart(2, '0');
      const timeStr = `${year}.${month}.${day} ${hour}:${minute}:${second}`;
      document.getElementById('currentTime').textContent = '时间：' + timeStr;
    }
    setInterval(updateTime, 1000);
    updateTime();

    // 模拟温度变化（真实项目请从接口获取）
    function updateTemperature() {
      // 模拟12-14°C之间浮动
      const temp = (12 + Math.random() * 2).toFixed(1);
      document.getElementById('currentTemp').textContent = `温度：${temp}°C`;
    }
    setInterval(updateTemperature, 5000);
    updateTemperature();

    // 模拟硬件运行时间倒计时等
    function formatRunTime(minutes) {
      const d = Math.floor(minutes / 1440);
      const h = Math.floor((minutes % 1440) / 60);
      const m = minutes % 60;
      return `${d}天${h}小时${m}分钟`;
    }
    let sensorRunMinutes = 24 * 24 + 13 * 60 + 43; // 24天13小时43分
    function updateSensorRunTime() {
      sensorRunMinutes++;
      document.getElementById('sensorRunTime').textContent = formatRunTime(sensorRunMinutes);
    }
    setInterval(updateSensorRunTime, 60000);
    updateSensorRunTime();

    // 下次检修时间倒计时（模拟35天后）
    let nextCheckDays = 35;
    function updateNextCheck() {
      if (nextCheckDays > 0) nextCheckDays -= 0.01;
      if (nextCheckDays < 0) nextCheckDays = 0;
      document.getElementById('nextCheck').textContent = `${nextCheckDays.toFixed(1)}天后`;
    }
    setInterval(updateNextCheck, 3600000);
    updateNextCheck();

    // 保修过期日期固定
    document.getElementById('warrantyExpire').textContent = '2035年02月01日';

    // 模拟鱼群数据
    const fishData = {
      count: [0,1,0,3,8],
      todayAdd: 8,
      todayDead: 6,
      environmentScore: 70,
      fishSpecies: "50+",
      fishSeedling: "500尾",
      fishGrowth: "600尾",
      cameraCount: "5+",
      gimbalCount: 2,
      sonarCount: 1,
      totalGuarantee: 159485,
      fishHistoryDates: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日'],
      fishHistoryValues: [300, 320, 310, 330, 360, 380],
      fishChangeDates: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日'],
      fishChangeValues: [400, 500, 450, 600, 700, 650],
      fishAttributes: {
        weight: [20, 22, 25, 23, 24, 26],
        size: [15, 18, 17, 19, 18, 20],
        life: [80, 85, 90, 87, 88, 91]
      },
      fishTypes: [
        {value: 335, name: '鲤鱼'},
        {value: 310, name: '鲫鱼'},
        {value: 234, name: '青鱼'},
        {value: 135, name: '草鱼'},
        {value: 1548, name: '其他'}
      ]
    };

    // 绑定鱼群数量
    function updateFishCount() {
      document.getElementById('fishCount').textContent = fishData.count.join(' ');
      document.getElementById('todayAdd').textContent = fishData.todayAdd;
      document.getElementById('todayDead').textContent = fishData.todayDead;
      document.getElementById('environmentScore').textContent = fishData.environmentScore;
      document.getElementById('fishSpecies').textContent = fishData.fishSpecies;
      document.getElementById('fishSeedling').textContent = fishData.fishSeedling;
      document.getElementById('fishGrowth').textContent = fishData.fishGrowth;
      document.getElementById('cameraCount').textContent = fishData.cameraCount;
      document.getElementById('gimbalCount').textContent = fishData.gimbalCount;
      document.getElementById('sonarCount').textContent = fishData.sonarCount;
    }
    updateFishCount();

    // ECharts实例初始化
    var fishHistoryChart = echarts.init(document.getElementById('fishHistoryChart'));
    var fishChangeChart = echarts.init(document.getElementById('fishChangeChart'));
    var fishAttributesChart = echarts.init(document.getElementById('fishAttributesChart'));
    var fishTypePieChart = echarts.init(document.getElementById('fishTypePieChart'));
    var totalInfoGauge = echarts.init(document.getElementById('totalInfoGauge'));

    // 总信息环形仪表盘
    function renderGauge(value) {
      totalInfoGauge.setOption({
        series: [
          {
            type: 'gauge',
            radius: '90%',
            startAngle: 90,
            endAngle: -269.9999,
            pointer: { show: true, length: '70%', width: 5 },
            axisLine: {
              lineStyle: {
                width: 18,
                color: [[1, 'rgba(0, 170, 255, 0.4)']]
              }
            },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            detail: {
              formatter: '{value}',
              color: '#00aaff',
              fontSize: 36,
              fontWeight: 'bold',
              offsetCenter: [0, '10%']
            },
            data: [{ value }],
            title: {
              show: true,
              offsetCenter: [0, '-30%'],
              color: '#00aaff',
              fontSize: 16,
              fontWeight: 'normal',
              formatter: '已保障养殖鱼群数量'
            }
          }
        ],
        backgroundColor: 'transparent'
      });
    }
    renderGauge(fishData.totalGuarantee);

    // 鱼群个体数量历史曲线
    function renderFishHistory() {
      fishHistoryChart.setOption({
        xAxis: {
          type: 'category',
          data: fishData.fishHistoryDates,
          axisLine: { lineStyle: { color: '#00aaff' } },
          axisLabel: { color: '#ccc' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#00aaff' } },
          splitLine: { lineStyle: { color: '#003366' } },
          axisLabel: { color: '#ccc' }
        },
        series: [{
          data: fishData.fishHistoryValues,
          type: 'line',
          smooth: true,
          lineStyle: { color: '#00ccff' },
          itemStyle: { color: '#00aaff' },
          areaStyle: { color: 'rgba(0,170,255,0.2)' }
        }],
        grid: { left: '10%', right: '10%', bottom: '15%', top: '15%' },
        backgroundColor: 'transparent'
      });
    }
    renderFishHistory();

    // 某鱼群数量变化折线
    function renderFishChange() {
      fishChangeChart.setOption({
        xAxis: {
          type: 'category',
          data: fishData.fishChangeDates,
          axisLine: { lineStyle: { color: '#00aaff' } },
          axisLabel: { color: '#ccc' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#00aaff' } },
          splitLine: { lineStyle: { color: '#003366' } },
          axisLabel: { color: '#ccc' }
        },
        series: [{
          data: fishData.fishChangeValues,
          type: 'line',
          smooth: true,
          lineStyle: { color: '#00ccff' },
          itemStyle: { color: '#00aaff' },
          areaStyle: { color: 'rgba(0,170,255,0.2)' }
        }],
        grid: { left: '10%', right: '10%', bottom: '15%', top: '15%' },
        backgroundColor: 'transparent'
      });
    }
    renderFishChange();

    // 鱼群属性统计折线
    function renderFishAttributes() {
      fishAttributesChart.setOption({
        legend: {
          textStyle: { color: '#00aaff' },
          data: ['重量', '尺寸', '生命']
        },
        xAxis: {
          type: 'category',
          data: fishData.fishChangeDates,
          axisLine: { lineStyle: { color: '#00aaff' } },
          axisLabel: { color: '#ccc' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#00aaff' } },
          splitLine: { lineStyle: { color: '#003366' } },
          axisLabel: { color: '#ccc' }
        },
        series: [
          { name: '重量', type: 'line', data: fishData.fishAttributes.weight, smooth: true, lineStyle: { color: '#00ccff' } },
          { name: '尺寸', type: 'line', data: fishData.fishAttributes.size, smooth: true, lineStyle: { color: '#ffaa00' } },
          { name: '生命', type: 'line', data: fishData.fishAttributes.life, smooth: true, lineStyle: { color: '#00ffcc' } }
        ],
        grid: { left: '10%', right: '10%', bottom: '15%', top: '15%' },
        backgroundColor: 'transparent'
      });
    }
    renderFishAttributes();

    // 鱼群种类统计饼图
    function renderFishTypePie() {
      fishTypePieChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: { color: '#00aaff' }
        },
        series: [{
          name: '鱼种',
          type: 'pie',
          radius: '70%',
          center: ['60%', '50%'],
          data: fishData.fishTypes,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            color: '#00aaff'
          }
        }],
        backgroundColor: 'transparent'
      });
    }
    renderFishTypePie();
  </script>
</body>
</html>